<template>
	<view class="flow_main">
		<!-- 商品瀑布流 -->
		<view class="lie_main">
			<prod-template @goAddCart="goAddCart" :parameter="parameter" class="list_box" :dataList="leftList"></prod-template>
			<prod-template @goAddCart="goAddCart" :parameter="parameter" class="list_box" :dataList="rightList"></prod-template>
			<!-- 检测图片高度专用 -->
			<view class="list_box dis_none"><prod-template :parameter="parameter" ref="check_img" :dataList="dataList" :type="true" @updateItem="updateItem"></prod-template></view>
		</view>
		
		<sww-goods-spec v-model="specVisible" type="2" :params="specParams"></sww-goods-spec>
	</view>
</template>

<script>
import prodTemplate from './template/prodTemplate.vue';
import { configMixin } from './flowMixin.js';
export default {
	mixins: [configMixin],
	props: {
		parameter:{
			type:Object,
			default:()=>{
				return {}
			}
		},
		newList: {
			type: Array,
			default: val => {
				return [];
			}
		}
	},
	components: {
		'prod-template': prodTemplate
	},
	data() {
		return {
			specVisible:false,
			specParams: {
				buyType: 'cart',
				prodId: ''
			},
		};
	},
	watch: {
		newList: {
			handler(newVal) {
				if (newVal && newVal[0]) {
					this.noneLoadList = [];
					// 获取没有图片的项
					this.dataList = newVal.map((item, index) => {
						if (!item.logo) {
							this.noneLoadList.push(index);
						}
						return item;
					});
					this.$nextTick(() => {
						// 获取没有图片的项的高度
						if (this.noneLoadList.length > 0) {
							this.$refs.check_img.checkNoImg(this.noneLoadList);
						}
						this.startInterval();
					});
				}
			},
			immediate: true
		}
	},
	methods:{
		goAddCart (prodId) {
			this.$login().then(() => {
				this.specParams.prodId = prodId
				this.$nextTick(()=>{
					this.specVisible = true
				})
			});
		}
	}
};
</script>

<style scoped lang="scss">
.flow_main {
	// 这个属性很重要，不能写到 lie_main 里，否则那个定位的list_box的宽度不一样
	padding: 10rpx 30rpx 0;
}
.lie_main {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	position: relative;
}
.list_box {
	width: calc(50% - 10rpx);
}
.list_box.dis_none {
	position: absolute;
	top: 0;
	left: -100%;
}
</style>
